<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style:none;}
			p{
				text-align: center;
				font-size: 35px;
				color: #fafafa;
				letter-spacing: 0;
				text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 
			}
			p:nth-child(1){
				margin-top: 5px;
			}
			.wrapper{
				width: 790px;
				height: 340px;
				position: relative;
				margin:10px auto 30px;
			}
			.wrapper .pic{
				width: 100%;
				height: 100%;
			}
			.wrapper .pic ul li{
				position: absolute;
				top: 0;
				left:0;
				width: 100%;
				height: 100%;
				display: none;
			}
			.wrapper .pic ul li.on{
				display: block;
			}
			.wrapper .tab{
				position: absolute;
				bottom: 10px;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				background: rgba(0,0,0,0.5);
				padding: 5px 10px;
				border-radius: 30px;
			}
			.wrapper .tab ul li{
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background:#fff;
				float: left;
				margin:3px 5px;
				cursor: pointer;
			}	
			.wrapper .tab ul li.on{
				background: orange;
			}	
			.btn{
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				font-size: 30px;
				color: #fff;
				cursor: pointer;
			}
			.btn:hover{
				background: rgba(0,0,0,0.4);
				-webkit-user-select: none;
			}
			.pre{
				left: 10px;
				border-radius:50%;
			}
			.next{
				right: 10px;
				border-radius:50%;
				
			}
			
		</style>
	</head>
	<body>
		<p>没有自动轮播</p>
		<div class="wrapper" id="wrapper1">
			<div class="pic">
				<ul>
					<li class="on">
						<img src="images/banner1.jpg" />
					</li>
					<li>
						<img src="images/banner2.jpg" />
					</li>
					<li>
						<img src="images/banner3.jpg" />
					</li>
					<li>
						<img src="images/banner4.jpg" />
					</li>
					<li>
						<img src="images/banner5.jpg" />
					</li>
					<li>
						<img src="images/banner6.jpg" />
					</li>
				</ul>
			</div>
			<div class="tab">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="btn pre">&lt;</div>
    		<div class="btn next">&gt;</div>
		</div>
		
		<p>扩展自动轮播功能</p>
		<div class="wrapper" id="wrapper2">
			<div class="pic">
				<ul>
					<li class="on">
						<img src="images/banner1.jpg" />
					</li>
					<li>
						<img src="images/banner2.jpg" />
					</li>
					<li>
						<img src="images/banner3.jpg" />
					</li>
					<li>
						<img src="images/banner4.jpg" />
					</li>
					<li>
						<img src="images/banner5.jpg" />
					</li>
					<li>
						<img src="images/banner6.jpg" />
					</li>
				</ul>
			</div>
			<div class="tab">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="btn pre">&lt;</div>
    		<div class="btn next">&gt;</div>
		</div>
		<script>
			!(function(){
				function ParentBanner(oWrapper,aPicLi,aTabLi,aBtn){
					this.oWrapper =  oWrapper;
					this.aPicLi = aPicLi;
					this.aTabLi = aTabLi;
					this.aBtn = aBtn;
					this.num =0;
					this.len = aTabLi.length;
					this.init();
					this.tabClick();
					this.BtnClick();
				}
				
				ParentBanner.prototype.init = function (){
					this.aPicLi[0].className = 'on';
					this.aTabLi[0].className = 'on';
				},
				ParentBanner.prototype.tabClick = function (){
					var This = this;
					for (var i = 0; i < this.len; i++) {
						this.aTabLi[i].index =i;
						this.aTabLi[i].onclick = function(){
							var eIndex = this.index;
							This.change(function(){
								This.num = eIndex;
							})
						}
					}
					
				},
				ParentBanner.prototype.BtnClick = function (){
					var _this = this;
					for (var j = 0; j < 2 ; j++) {
						_this.aBtn[j].j = j;
						_this.aBtn[j].onclick = function(){
							var eJ = this.j
							_this.change(function(){
								if(eJ){//点击下一张 next
									_this.num++;
									_this.num%=_this.len;
								}else{//点击上一张 pre
									_this.num--;
									if(_this.num<0){
										_this.num = _this.len-1
									}
								}
							})
						}
					}
					
				},
				ParentBanner.prototype.change = function (fn){
					this.aTabLi[this.num].className = '';
					this.aPicLi[this.num].className = '';
					fn();
					this.aTabLi[this.num].className = 'on';
					this.aPicLi[this.num].className = 'on';
					
				}
				
				function ChildrenBanner(oWrapper,aPicLi,aTabLi,aBtn){
					ParentBanner.call(this,oWrapper,aPicLi,aTabLi,aBtn);
					this.timer = null;
					this.auto();
				}
				ChildrenBanner.prototype.auto = function(){
					var This = this;
		            this.timer = setInterval(function () {
		                This.change(function () {
		                    This.num++;
		                    This.num%=This.len;
		                })
		            },1000);
		            this.oWrapper.onmouseenter=function () {
		                clearInterval(This.timer)
		            };
		            this.oWrapper.onmouseleave=function () {
		                This.auto()
		            }
				}
				
				for(var key in ParentBanner.prototype){
					ChildrenBanner.prototype[key] = ParentBanner.prototype[key];
				}
				
				!(function(){//父类
					var oWrapper = document.getElementById('wrapper1');
					var aPic = oWrapper.getElementsByClassName("pic")[0];
					var aPicLi = aPic.getElementsByTagName('li');
					var aTab = oWrapper.getElementsByClassName('tab')[0];
					var aTabLi = aTab.getElementsByTagName('li');
					var aBtn = oWrapper.getElementsByClassName('btn');	
					new ParentBanner(oWrapper,aPicLi,aTabLi,aBtn)//实例化
				})();
				
				!(function(){//子类
					var oWrapper = document.getElementById('wrapper2');
					var aPic = oWrapper.getElementsByClassName("pic")[0];
					var aPicLi = aPic.getElementsByTagName('li');
					var aTab = oWrapper.getElementsByClassName('tab')[0];
					var aTabLi = aTab.getElementsByTagName('li');
					var aBtn = oWrapper.getElementsByClassName('btn');	
					new ChildrenBanner(oWrapper,aPicLi,aTabLi,aBtn)//实例化
				})();
				
			})()
			
		</script>
	</body>
</html>
